<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        #app {
            width: 100%;
            height: 100%;
        }
        table {
            text-align: center;
            width: 100%;
        }
        tr {
            line-height:30px;
        }
        #title {
            font-size: 20px;
            font-weight: 600;
            line-height:50px;
        }
        #account {
            margin-top: 100px;
            position: fixed;
            right:100px;
        }
        #clear {
            margin-top: 107px;
            position: fixed;
            right: 270px;
        }
        #cul {
            margin-top: 107px;
            position: fixed;
            right: 50px;
        }
    </style>
    <script src="js包/vue.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr id="title">
                <td>序号</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item) in goods">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button v-bind:disabled="item.count <= 0" @click="item.count--">&nbsp;-&nbsp;</button>
                    {{item.count}}
                    <button @click="item.count++">&nbsp;+&nbsp;</button>
                </td>
                <td>
                    <button @click="item.count=0">清除</button>
                </td>
            </tr>
        </table>
        <button id="clear" @click="remove">全部清除</button>
        <h2 id="account">总计:{{sum}}</h2>
        <button id="cul">结算</button>
    
    </div>
    <script>
        var app = new Vue({
            el : "#app",
            data : {
                goods : [
                    {id:1,name:"iPhone 13 Pro",price:"￥8799.00",count:1},
                    {id:2,name:"iPad Pro",price:"￥10499.00",count:1},
                    {id:3,name:"AirProds",price:"￥1399.00",count:1},
                    {id:4,name:"MacBokk Pro",price:"￥14999.00",count:1},
                    {id:5,name:"Apple Watch",price:"￥2999.00",count:1}
                ]
            },
            computed : {
                sum() {
                    var sum = 0;
                    for (let i = 0; i < this.goods.length; i++) {
                        for (var key in this.goods[i]) {
                            if (key == "price") {
                                var price = this.goods[i][key].substring(1,this.goods[i][key].length);
                                sum += parseFloat(price) * this.goods[i].count;
                            } 
                        }
                    }
                    return "￥" + sum;
                }
            },
            methods : {
                remove () {
                    for (let i = 0; i < this.goods.length; i++) {
                        for (var key in this.goods[i]) {
                            if (key == "count") {
                                this.goods[i][key] = 0;
                            } 
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>